<template>
  <div id="FilmArrangement">
    <el-table :data="tableData" height="770" border style="width: 100%">
      <el-table-column prop="name" label="电影名" width="105">
      </el-table-column>
      <el-table-column prop="date" label="放映时间" width="107">
      </el-table-column>
      <el-table-column prop="seatNumber" label="开放座位" width="80">
      </el-table-column>
      <el-table-column prop="type" label="上映类型" width="86">
        <template slot-scope="scope">
          <div class="tableType">
            <span v-if="scope.row.type == '2D'" class="twoD"
              >{{ scope.row.type }} 放映</span
            >
            <span v-if="scope.row.type == '3D'" class="threeD"
              >{{ scope.row.type }} 放映</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="boxOffice" label="票房统计" width="80">
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="90">
      </el-table-column>
      <el-table-column prop="price" label="本场票价" width="100">
        <template slot-scope="scope">
          <div class="tablePrice">
            <span>{{ scope.row.price }} 元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="">
        <!-- 头部输入框 -->
        <template slot="header" slot-scope="scope">
          <el-input
            :change="like()"
            v-model="search"
            placeholder="请输入内容"
            >{{ scope.row }}</el-input
          >
        </template>
        <!-- 三个按钮 -->
        <template slot-scope="scope">
          <div class="tableBtn">
            <el-button @click="editOffic(scope.row.id)" type="success"
              >统计票房</el-button
            >
            <el-button @click="VisibleArrangement(scope.row.id)" type="primary"
              >修改</el-button
            >
            <el-button @click="remove(scope.row.id)" type="danger"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 统计票房 -->
    <div class="boxOffic">
      <el-dialog title="提示" width="680px" :visible.sync="OfficVisible">
        <div class="inner">
          <span>请输入本场次票房</span>
          <el-input v-model="newOffic" placeholder="请输入内容"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="OfficVisible = false">取 消</el-button>
          <el-button type="primary" @click="editArrOffic()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 修改排片信息 -->
    <div class="boxOffic">
      <el-dialog title="提示" width="680px" :visible.sync="ArrangementVisible">
        <!-- 电影名称 -->
        <div class="filmName">
          <span>电影名称</span>
          <el-input
            placeholder="请输入内容"
            v-model="newArr.name"
            :disabled="true"
          >
          </el-input>
        </div>
        <!-- 开放座位 -->
        <div class="openseat">
          <span>开放座位</span>
          <el-input-number
            v-model="newArr.seatNumber"
            :min="1"
            :max="40"
            label="开放座位"
          ></el-input-number>
        </div>
        <!-- 放映类型 -->
        <div class="filmType">
          <span>放映类型</span>
          <el-select v-model="newArr.type" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 放映日期 -->
        <div class="filmDate">
          <span>放映日期</span>
          <el-date-picker
            v-model="newArr.date"
            type="datetime"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <!-- 放映时间 -->
        <div class="filmTime">
          <span>放映时间</span>
          <el-time-select
            placeholder="起始时间"
            v-model="newArr.startTime"
            :picker-options="{
              start: '08:30',
              step: '00:05',
              end: '22:30',
            }"
          >
          </el-time-select>
          <span> - </span>
          <el-time-select
            placeholder="结束时间"
            v-model="newArr.endTime"
            :picker-options="{
              start: '08:30',
              step: '00:05',
              end: '23:55',
            }"
          >
          </el-time-select>
        </div>
        <!-- 电影票价 -->
        <div class="filmTicket">
          <span>电影票价</span>
          <el-input-number
            v-model="newArr.price"
            :precision="2"
            :step="0.5"
            :max="50"
          ></el-input-number>
        </div>
        <!-- 排片人 -->
        <div class="filmFound">
          <span>排片人</span>
          <el-input
            placeholder="请输入内容"
            v-model="newArr.founder"
            :disabled="true"
          >
          </el-input>
        </div>

        <!-- 底部按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="ArrangementVisible = false">取 消</el-button>
          <el-button type="primary" @click="editArr()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getArrangement,
  editArrangement,
  removeArr,
  likeArrangement,
} from "@/api/admin";
export default {
  name: "filmArrangement",
  data() {
    return {
      tableData: [
        {
          id: "",
          fid: "",
          name: "",
          seatNumber: "",
          price: "",
          type: "",
          date: "",
          startTime: "",
          boxOffic: "",
          endTime: "",
          founder: "",
          creatAt: "",
        },
      ],
      newArr: {
        id: "",
        fid: "",
        name: "",
        seatNumber: 0,
        price: "",
        type: "",
        date: "",
        startTime: "",
        boxOffic: "",
        endTime: "",
        founder: "",
        creatAt: "",
      },
      types: [
        {
          label: "2D",
          value: "2D",
        },
        {
          label: "3D",
          value: "3D",
        },
      ],
      newOffic: "",
      search: "",
      OfficVisible: false,
      ArrangementVisible: false,
    };
  },
  methods: {
    getArr: function () {
      getArrangement().then((res) => {
        this.tableData = res.data;
      });
    },
    //点击统计票房
    editOffic: function (id) {
      this.OfficVisible = true;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == id) {
          this.newArr = JSON.parse(JSON.stringify(this.tableData[i]));
        }
      }
    },
    // 统计票房提交
    editArrOffic: function () {
      this.newArr.boxOffice = this.newOffic;
      editArrangement(
        this.newArr.id,
        this.newArr.fid,
        this.newArr.name,
        this.newArr.seatNumber,
        this.newArr.boxOffice,
        this.newArr.price,
        this.newArr.type,
        this.newArr.date,
        this.newArr.startTime,
        this.newArr.endTime,
        this.newArr.founder
      ).then((res) => {
        this.OfficVisible = false;
      });
    },
    // 点击修改排片
    VisibleArrangement: function (id) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == id) {
          this.newArr = JSON.parse(JSON.stringify(this.tableData[i]));
        }
      }
      this.ArrangementVisible = true;
    },
    // 修改排片信息
    editArr: function () {
      editArrangement(
        this.newArr.id,
        this.newArr.fid,
        this.newArr.name,
        this.newArr.seatNumber,
        this.newArr.boxOffice,
        this.newArr.price,
        this.newArr.type,
        this.newArr.date,
        this.newArr.startTime,
        this.newArr.endTime,
        this.newArr.founder
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            messaege: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            messaege: "删除失败",
            type: "error",
          });
        }
        this.ArrangementVisible = false;
      });
    },
    // 删除排片信息
    remove: function (id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeArr(id).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id == id) {
                  this.tableData.splice(i, 1);
                }
              }
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 模糊查询
    like: function () {
      if (this.search == "") {
        this.getArr();
        return;
      }
      likeArrangement(this.search).then((res) => {
        this.tableData = res.data;
      });
    },
  },
  mounted() {
    this.getArr();
  },
};
</script>

<style lang="less" scoped>
#FilmArrangement {
  // 上映类型
  .tableType {
    width: 58px;
    height: 26px;
    .twoD {
      border-radius: 5px;
      display: block;
      text-align: center;
      background-color: greenyellow;
    }
    .threeD {
      border-radius: 5px;
      display: block;
      text-align: center;
      background-color: rgba(14, 175, 192, 1);
    }
  }
  // 票价
  .tablePrice {
    width: 80px;
    height: 34px;
    border: rgba(14, 175, 192, 1) 1px solid;
    border-radius: 5px;
    text-align: center;
    span {
      color: rgba(14, 175, 192, 1);
      line-height: 34px;
    }
  }
  // 三个按钮
  .tableBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    .el-button {
      width: 98px;
    }
  }

  // 统计票房
  .boxOffic {
    display: flex;
    // 电影名称
    .filmName {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        margin-left: 10px;
        width: 496px;
      }
    }
    // 开放座位
    .openseat {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    // 电影类型
    .filmType {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    // 放映日期
    .filmDate {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    // 放映时间
    .filmTime {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    // 电影票价
    .filmTicket {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
      span {
        margin-right: 10px;
      }
    }
    .filmFound {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
      .el-input {
        width: 496px;
        margin-left: 23px;
      }
    }
  }
}
</style>